<template>
  <div class="container">
    <div class="navBar-box">
      <!-- 左边logo区域 -->
      <div class="logo">
        <img src="@/assets/logo.png" class="logo_pic" alt="Image" />
        <p>化简</p>
      </div>
      <div class="center">
        <div class="auto_save">
          <span>{{ words }}</span>
        </div>
        <p>{{ userResumeStore.resumeJsonNewStore.TITLE }}</p>
        <div class="icons">
          <SvgIcon name="write" width="20px" hight="20px"></SvgIcon>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right">
        <div @click="gotohome">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="返回首页"
            placement="bottom"
          >
            <SvgIcon
              name="return"
              width="25px"
              hight="25px"
              class="return"
            ></SvgIcon>
          </el-tooltip>
        </div>
        <div @click="savePDF">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="导出为PDF"
            placement="bottom"
          >
            <SvgIcon
              name="pdf"
              width="25px"
              hight="25px"
              class="return"
            ></SvgIcon>
          </el-tooltip>
        </div>
        <div>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="导出为JSON数据"
            placement="bottom"
          >
            <SvgIcon
              name="json"
              width="25px"
              hight="25px"
              class="return"
            ></SvgIcon>
          </el-tooltip>
        </div>
        <div @click="resethandler">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="重置数据"
            placement="bottom"
          >
            <SvgIcon
              name="reset"
              width="25px"
              hight="25px"
              class="return"
            ></SvgIcon>
          </el-tooltip>
        </div>
        <div @click="savedatahandler">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="保存草稿"
            placement="bottom"
          >
            <SvgIcon
              name="save"
              width="25px"
              hight="25px"
              class="return"
            ></SvgIcon>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import moment from 'moment'
import { debounce } from 'lodash'
import { Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { useResumeJsonStore } from '@/store/resume'
const $emit = defineEmits(['reset', 'loadPDF'])
let userResumeStore = useResumeJsonStore()
let route = useRoute()
const router = useRouter()
const { id, name } = route.query
const key: string = id
let saveData: { [key: string]: any } = {}
const words = ref('')
const date = ref('')
//存到本地
const saveLocalData = () => {
  const getData = localStorage.getItem('resumeDraft')
  if (getData) {
    //本地存储有resumeDraft，但可能没有存这个模板数据
    saveData = JSON.parse(getData)
    saveData[key] = userResumeStore.resumeJsonNewStore
  } else {
    saveData[key] = userResumeStore.resumeJsonNewStore
  }
  date.value = moment().format('YYYY-MM-DD HH:mm:ss')
  words.value = `已自动保存草稿${date.value}`
  localStorage.setItem('resumeDraft', JSON.stringify(saveData))
}
//监听简历数据，自动保存简历数据草稿
const debounceHandle: any = debounce(saveLocalData, 1000)
watch(
  userResumeStore.resumeJsonNewStore,
  () => {
    debounceHandle()
  },
  { deep: true },
)
//返回首页
const gotohome = () => {
  router.push({ name: 'home' })
}
//重置
const resethandler = () => {
  $emit('reset')
}
//保存草稿
const savedatahandler = () => {
  ElMessage({
    message: '保存草稿成功',
    type: 'success',
  })
  debounceHandle()
}
const savePDF = () => {
  $emit('loadPDF', userResumeStore.resumeJsonNewStore.TITLE)
}
</script>
<style lang="scss" scoped>
@mixin size($w, $h) {
  width: $w;
  height: $h;
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: '阿里妈妈刀隶体 Regular';
  font-weight: 400;
  src:
    url('//at.alicdn.com/wf/webfont/YL9FqzHidzZX/ee07wVjg2BW0.woff2')
      format('woff2'),
    url('//at.alicdn.com/wf/webfont/YL9FqzHidzZX/0Zcw2sY4AY3c.woff')
      format('woff');
  font-display: swap;
}

/* element-plus下拉菜单样式 */
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* .container {
  height: 1000px;
  background: pink;
} */
.navBar-box {
  @include size(100%, 50px);
  background-color: #fff;
  display: flex;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;

  .logo {
    display: flex;
    flex: 2;
    padding-left: 2vw;

    p {
      font-family: '阿里妈妈刀隶体 Regular';
      font-size: 30px;
      padding-top: 2px;
    }
  }

  .center {
    display: flex;
    flex: 5;
    justify-content: center;
    align-items: center;
    .auto_save {
      position: absolute;
      span {
        position: relative;
        top: 0;
        left: -300px;
        font-size: 12px;
        color: #999999;
      }
    }

    p {
      line-height: 40px;
    }

    .icons {
      margin: 5px 0 0 5px;
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    padding-right: 2vw;
    padding-top: 14px;
    flex: 3;

    div {
      @include size(35px, 35px);
      border-radius: 50%;
      background-color: #05c697;
      margin: 0 0.5vw;

      .return {
        margin: 4px 0 0 5px;
      }
    }
  }
}
</style>
